<template>
  <div>
    <live-pusher
      class="pusher"
      url="rtmp://lovekaka.lovekaka.cn/akk/test"
      mode="RTC"
      @statechange="statechange"
      :device-position="deviceposition"
      :orientation="orientation"
      :beauty="beauty"
      :whiteness="whiteness"
      style="width: 100%; height: 100%"
      waiting-image="http://akk028wkf.oss-cn-beijing.aliyuncs.com/app/dynamic/20180828/NELF-845359_full.jpg"
    >
      <div class="control">
        <div>
          <img @click="showPopupBeauty" class="icon" src="https://static.naispanda.com/20200427/173320664e2bd6ec7f2404f159f383e948e50274b.png" alt />
        </div>
        <div @click="StartOrEnd">
          <img v-if="!isStart" class="icon" src="https://static.naispanda.com/20200427/1732484216cab7568039e4009851e031d6a3fb066.png" alt />
          <img v-else class="icon" src="https://static.naispanda.com/20200427/173410842c2ed3b29a62344648305a58c0a8ad0ec.png" alt />
        </div>
        <div @click="changeDevice">
          <img class="icon" src="https://static.naispanda.com/20200427/17335430993f1bffd075e429cbcb1350782f1a72f.png" alt />
        </div>
      </div>
    </live-pusher>
    <div class="beautyBox" v-if="showPopup">
      <div class="bankCardCont">
        <div class="">
          <p>美颜等级</p>  
          <slider @change="changeMeiyan" min="0" max="9" show-value />
        </div>
        <div class="">
          <p>美白等级</p>
          <slider @change="changeMeibai" min="0" max="9" show-value />
        </div>
      </div>
      <div class="zz" @click="zzClick"></div>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  props: {},
  data () {
    return {
      deviceposition: 'front', // 摄像头方向  front:前置 ，back:后置
      orientation: 'vertical', // 画面方向  vertical：竖直，horizontal：水平
      beauty: 0, // 美颜等级0-9
      whiteness: 0, // 美白等级 0-9
      showPopup: false,
      isStart: false
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  onShow () {},
  methods: {
    statechange (e) {
      console.log('live-pusher code:', e.target.code)
    },
    changeDevice () {
      let LivePusherContext = wx.createLivePusherContext()
      LivePusherContext.switchCamera({
        success (res) {
          console.log(res)
        }
      })
    },
    // 美颜
    changeMeiyan (e) {
      console.log(e)
      this.beauty = e.target.value
    },
    // 美白
    changeMeibai (e) {
      this.whiteness = e.target.value
    },
    showPopupBeauty () {
      this.showPopup = true
      console.log(111)
    },
    zzClick () {
      this.showPopup = false
    },
    StartOrEnd () {
      this.isStart = !this.isStart
      let LivePusherContext = wx.createLivePusherContext()
      if (this.isStart) {
        LivePusherContext.start({
          success (res) {
            console.log(res)
          }
        })
      } else {
        LivePusherContext.stop({
          success (res) {
            console.log(res)
          }
        })
      }
    }
  }
}
</script>
 
<style lang="scss" scoped>
@import "static/styles/color.scss";
.pusher {
  position: relative;
}
.control{
  display: flex;
  justify-content: space-between;
  width: 90%;
  margin: 0 auto;
  z-index: 2;
  position: absolute;
  bottom: 10px;
  .icon{
    width: 30px;
    height: 30px;
  }
}
.beautyBox {
  position: absolute;
  bottom: 0;
  .bankCardCont {
    position: fixed;
    bottom: 0;
    z-index: 5;
    width: 100%;
    padding: 10px 15px;
    background: #fff;
  }
}
.zz {
  position: fixed;
  z-index: 3;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #000000;
  opacity: 0.3;
}
</style>
